{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import card, callout, split with context %}

{% extends "firefox/base/base-protocol.html" %}

{% block page_title %}{{ main_title }}{% endblock %}
{% block page_desc %}{{ page_description }}{% endblock %}
{% block page_image %}{{ static('img/firefox/share-page/fx-share-the-love.png') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('firefox_share') }}
{% endblock %}

{% if LANG == "de" %}
  {% set main_title = "Hol deine Freund*innen ins <br><strong>Team Firefox</strong>"|safe %}
  {% set page_description = "Wir glauben, als gute*r Freund*in solltest du sie auf die sonnige Seite des Internets einladen. Wir haben da mal was vorbereitet." %}
  {% set main_tagline = "Wir haben eine kleine Nachricht vorbereitet, die du mit deinen Liebsten teilen kannst, damit du dir nicht selbst etwas ausdenken musst. Wird keiner merken – versprochen!" %}
  {% set share_message = "Hey! Ich wollte dir nur sagen, dass du echt schöne Augen hast. Ihre perfekte Form erinnert mich an das Firefox-Logo. Kennst du Firefox? Das ist dieser private, super verlässliche Browser. Eigentlich echt gut, hier ist ein Link, falls du dir den mal angucken willst: <a href='https://mzl.la/de-raf'>mzl.la/de-raf</a>. <br><br> Wie gehts dir eigentlich?"|safe%}
  {% set share_cta = "Kopieren und teilen" %}
  {% set text_copied = "Text kopiert!" %}
  {% set email_subject = "Komm ins Team Firefox!" %}
  {% set sign_off = "<strong>Powered by Mozilla.</strong> <br> Für dich und das Web. Schon seit 1998."|safe %}

{% elif LANG == "fr" %}
  {% set main_title = "Invitez vos amis à rejoindre la <br> <strong>team Firefox</strong>"|safe %}
  {% set page_description = "Nous pensons que, comme un bon ami, il est temps de les inviter à découvrir le bon côté de l'internet. Nous avons donc préparé quelque chose pour vous." %}
  {% set main_tagline = "Nous avons préparé un message personnel pour vos amis, afin que vous n'ayez pas à le faire vous-même. Ils ne se douteront de rien, c'est promis !" %}
  {% set share_message = "Salut ! Je voulais juste te dire que tu as de beaux yeux. Leur forme parfaite me rappelle le logo de Firefox. Tu connais Firefox ? Ce navigateur privé, super fiable. Il est plutôt pas mal en vrai, voici un lien si tu veux le tester : <a href='https://mzl.la/fr-raf'>mzl.la/fr-raf</a>.<br><br> Sinon, comment vas-tu ?"|safe%}
  {% set share_cta = "Copier et partager" %}
  {% set text_copied = "Texte copié !" %}
  {% set email_subject = "Rejoins la team Firefox !" %}
  {% set sign_off = "<strong>Conçu par Mozilla.</strong> <br> Pensé pour vous depuis 1998."|safe %}

{% else %}

  {% set main_title = "Invite your friends to <br> <strong>Team Firefox</strong>"|safe %}
  {% set page_description = "As a good friend, we think you should invite your buds to the sunny side of the internet. We have a little something prepared." %}
  {% set main_tagline = "We’ve prepared a little message that you can share with your loved ones so you don't have to think of something yourself. Nobody will notice – promise!" %}
  {% set share_message = "Experience the internet the way you want. Have you heard of Firefox? It’s a private, reliable and fast browser with hands-down the best logo. Here’s a link if you want to check it out. <a href='https://mzl.la/us-raf'>mzl.la/us-raf</a>."|safe%}
  {% set share_cta = "Copy and share" %}
  {% set text_copied = "Text copied!" %}
  {% set sign_off = "<strong>Powered by Mozilla.</strong> <br> Putting people before profits since 1998."|safe %}

{% endif %}

{% block content %}
  <section class="mzp-l-content mzp-t-content-md firefox-share">
    <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox"></div>
    <h1>{{ main_title }}</h1>
    <p class="tagline">{{ main_tagline }}</p>

    <div class="copy-wrapper mzp-t-content-sm">
      <div class="copy-text">
        <p id="text-to-copy">{{ share_message }}</p>
      </div>
      <button id="copy-button" data-cta-text="Copy and share">
        <span id="share-cta">{{ share_cta }}</span>
        <span id="text-copied">{{ text_copied }}</span>
      </button>
    </div>
  </section>

    <p class="sign-off">
      {{ sign_off }}
    </p>
{% endblock %}

{% block js %}
  {{ js_bundle('firefox_share') }}
{% endblock %}
